<template>
  <b-page class="tag-manage" :load="!loading">
    <a-alert
      v-if="isExportLoading"
      message="提示"
      description="企业标签同步中，预计需要1-5分钟，请稍后查看！"
      type="success"
      show-icon
    />
    <div class="tag-sync d-aic">
      <b-button
        class="tag-sync-btn"
        btn-content="同步"
        ghost="default"
        type="danger"
        :loading="isExportLoading"
        @click="syncTag"/>
      <div class="tag-sync-tip">任务宝会自动同步企业微信后台的企业标签，如果没有及时同步，点击【同步】按钮后手动同步数据</div>
      <div class="d-jcc-aic" v-if="isExportLoading">
        <div class="sync-progress"> 正在从企业微信导入，请等待...</div>
        <div class="material-icons desc-state-icon">autorenew</div>
      </div>
    </div>
    <div class="tag-main-content">
      <div class="pb-24">
        <span class="tag-main-title">企业客户标签</span> <span class="tag-main-tip">（企业标签由管理员统一配置，配置后企业全部成员可使用)</span>
      </div>
      <div class="pb-24 tag-border-bottom">
        <b-button prefix-icon="plus" @click="addTag()" btn-content="添加标签组"/>
      </div>
      <div class="tag-list-wrap">
        <a-empty v-if="!TagGroupList.length"/>
        <template v-else>
          <div class="d-aic tag-group-content" v-for="item in TagGroupList" :key="item.groupId">
            <div class="tag-group-name">{{ item.groupName }}</div>
            <div class="tag-group-main">
              <b-button
                prefix-icon="plus"
                @click="addTag(item)"
                class="add-tag-btn"
                ghost="default"
                type="default"
                btn-content="添加"/>
              <a-tag v-for="tag in item.tagList" class="tag-item" :key="tag.id">{{ tag.name }}</a-tag>
            </div>
            <div class="tag-group-edit d-aic">
              <a-button type="link" @click="editTag(item)" style="padding:0">编辑</a-button>
              <a-button type="link" @click="delTagGroup(item)" style="padding:0">删除</a-button>
            </div>
          </div>
        </template>
      </div>
    </div>
    <tag-moadl ref="tagModal" @saveTag="saveTag"/>
  </b-page>
</template>
<script>
    import BButton from '../../../components/b-button'
    import API, { delTagGroup } from '../../../../api/tag'
    import TagMoadl from './tagModal'

    export default {
        name: 'TagManage',
        components: { TagMoadl, BButton },
        data () {
            return {
                TagGroupList: [],
                isExportLoading: false,
                loading: false
            }
        },
        computed: {
            qwUserId () {
                return this.$store.state.user.info.qwUserId
            }
        },
        mounted () {
            this.getTagList()
            this.checkRunningSyncTag()
        },
        methods: {
            /**
             *检查是否有同步的标签任务
             */
            checkRunningSyncTag () {
                API.checkRunningSyncTag({ qwUserId: this.qwUserId }).then(res => {
                    if (this.isExportLoading && !res.synchronizings) {
                        this.$message.success(`导入完成`)
                        this.isExportLoading = false
                        this.getTagList()
                    }
                    if (res.synchronizings) {
                        this.isExportLoading = true
                        setTimeout(() => {
                            this.checkRunningSyncTag()
                        }, res.remaining + 2000)
                    }
                })
            },
            getTagList () {
                API.list({ qwUserId: this.qwUserId }).then(res => {
                    this.TagGroupList = res
                    this.loading = true
                }).catch(() => {
                    this.loading = true
                })
            },
            syncTag () {
                if (this.isExportLoading) {
                    this.$message.warning(`正在导入，请等待。。。`)
                    return
                }
                API.syncTag({ qwUserId: this.qwUserId }).then(res => {
                    this.isExportLoading = true
                    this.$message.warning(`正在同步，请等待。。。`)
                    setTimeout(() => {
                        this.checkRunningSyncTag()
                    }, 5000)
                })
            },
            editTag (item) {
                this.$refs.tagModal.show(item)
            },
            delTagGroup (item) {
                const self = this
                this.$warning({
                    title: `确认删除【${item.groupName}】吗？`,
                    okText: '确认',
                    okType: 'primary',
                    maskClosable: true,
                    onOk () {
                        delTagGroup({ qwUserId: self.qwUserId, groupId: item.groupId }).then(() => {
                            self.$message.success(`删除成功`)
                            self.getTagList()
                        })
                    }
                })
            },
            addTag (item = {
                groupId: null,
                groupName: '',
                tagList: [{ name: '' }]
            }) {
                this.$refs.tagModal.show(item)
            },
            /**
             * 弹窗保存完成,更新列表
             */
            saveTag () {
                this.getTagList()
            }
        }
    }
</script>

<style scoped lang="less">
    .tag-manage {
        .desc-state-icon {
            margin-left: 8px;
            font-size: 20px;
            color: rgb(222, 31, 38);
            animation: syncAnimal 1.5s forwards infinite;
        }

        .sync-progress {
            margin-left: 10px;
            height: 20px;
            color: rgb(222, 31, 38);
        }

        .tag-sync-btn {
            margin-right: 24px;
            width: 90px;
            color: rgb(222, 31, 38);
            border: 1px solid rgb(222, 47, 38);
        }

        .tag-sync {
            margin-bottom: 24px;
            padding: 16px 0 16px 32px;
            background: white;

        }

        .tag-sync-tip {
            font-size: 14px;
            color: #ff5f5f;
        }

        .pb-24 {
            padding-bottom: 24px;
        }

        .tag-border-bottom {
            border-bottom: 1px solid #D9D9D9;
        }

        .tag-main-content {
            padding: 24px 32px 0;
            background: white;

            .tag-main-title {
                font-size: 18px;
                color: #101010;
            }

            .tag-main-tip {
                font-size: 14px;
                color: #9f9f9f;
            }

            .tag-list-wrap {
                .tag-group-content {
                    min-height: 60px;
                    border-bottom: 1px solid #D9D9D9;
                }

                .tag-group-name {
                    flex-shrink: 0;
                    font-size: 14px;
                    color: #101010;
                }

                .tag-group-main {
                    flex-grow: 1;
                    margin: 0 50px;
                }

                .tag-group-edit {
                    flex-shrink: 0;
                    color: #9f9f9f;
                }

                .tag-item {
                    height: 32px;
                    line-height: 32px;
                }

                .add-tag-btn {
                    height: 32px;
                    margin-right: 20px;
                }
            }

        }

    }
</style>
